<template>
  <div class="course-card" @click="navigateToCourseDetail">
    <div class="course-card-inner">
      <!-- 课程封面图 -->
      <div class="course-cover">
        <img :src="course.coverImage || defaultCoverImage" alt="课程封面" class="cover-image" @error="handleImageError">
        <div class="course-duration">
          {{ formatDuration(course.duration) }}
        </div>
      </div>
      
      <!-- 课程信息 -->
      <div class="course-info">
        <h3 class="course-title">{{ course.title }}</h3>
        <div class="course-meta">
          <span class="course-category">{{ course.categoryTitle }}</span>
          <span class="course-date">{{ formatDate(course.startTime) }}</span>
        </div>
        <p class="course-description">{{ truncateDescription(course.description) }}</p>
        <div class="course-stats">
          <div class="stat-item">
            <i class="el-icon-user"></i>
            <span>{{ course.enrollmentCount || 0 }} 人学习</span>
          </div>
          <div class="stat-item">
            <i class="el-icon-star"></i>
            <span>{{ course.rating || 0 }} 评分</span>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'CourseCard',
  props: {
    course: {
      type: Object,
      required: true
    }
  },
  data() {
    return {
      // 使用完整的相对路径引用
      defaultCoverImage: '/placeholder/vue3-course.jpg',
      // 备选默认图片，当主默认图片加载失败时使用
      fallbackCoverImage: '/placeholder/react-course.jpg'
    }
  },
  methods: {
      // 简化图片加载错误处理，直接显示本地占位图
      handleImageError(event) {
        console.warn('课程图片加载失败，尝试使用本地占位图片:', event.target.src);
        
        // 确保使用相对路径而非绝对URL
        const basePath = '/placeholder/';
        const imageNames = ['vue3-course.jpg', 'react-course.jpg', 'node-course.jpg', 'new-course.jpg'];
        
        // 生成所有可能的本地图片路径
        const localPaths = imageNames.map(name => basePath + name);
        
        // 检查当前图片是否已经是我们的本地路径之一
        const isAlreadyLocal = localPaths.some(path => event.target.src.includes(path));
        
        if (!isAlreadyLocal) {
          // 如果不是本地路径，尝试第一个本地图片
          event.target.src = localPaths[0];
          
          // 添加一次性错误处理，当第一个本地图片也加载失败时尝试其他图片
          const attemptNextImage = function(e) {
            // 移除这个一次性处理器，避免重复触发
            e.target.removeEventListener('error', attemptNextImage);
            
            // 尝试下一个本地图片
            const currentIndex = localPaths.indexOf(e.target.src.replace(window.location.origin, ''));
            if (currentIndex < localPaths.length - 1) {
              e.target.src = localPaths[currentIndex + 1];
              // 递归添加处理器
              e.target.addEventListener('error', attemptNextImage);
            } else {
              // 如果所有本地图片都加载失败，显示占位文本
              e.target.style.background = '#f0f0f0';
              e.target.style.display = 'flex';
              e.target.style.alignItems = 'center';
              e.target.style.justifyContent = 'center';
              e.target.style.color = '#999';
              e.target.style.fontSize = '14px';
              e.target.style.textAlign = 'center';
              e.target.innerHTML = '<span>课程封面</span>';
            }
          };
          
          // 为第一个本地图片添加错误处理器
          event.target.addEventListener('error', attemptNextImage);
        }
      },
    // 使用$router.push进行路由跳转
    navigateToCourseDetail() {
      this.$router.push(`/course/${this.course.id}`);
    },
    
    // 格式化课程时长
    formatDuration(duration) {
      if (!duration) return '0小时';
      const hours = Math.floor(duration / 60);
      const minutes = duration % 60;
      return minutes > 0 ? `${hours}小时${minutes}分钟` : `${hours}小时`;
    },
    
    // 格式化日期
    formatDate(dateString) {
      if (!dateString) return '无';
      const date = new Date(dateString);
      return `${date.getFullYear()}-${String(date.getMonth() + 1).padStart(2, '0')}-${String(date.getDate()).padStart(2, '0')}`;
    },
    
    // 截断课程描述
    truncateDescription(description) {
      if (!description) return '暂无描述';
      return description.length > 100 ? description.substring(0, 100) + '...' : description;
    }
  }
}
</script>

<style scoped>
.course-card {
  cursor: pointer;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.course-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.12);
}

.course-card-inner {
  background: #fff;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

.course-cover {
  position: relative;
  height: 180px;
  overflow: hidden;
}

.cover-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.3s ease;
}

.course-card:hover .cover-image {
  transform: scale(1.05);
}

.course-duration {
  position: absolute;
  bottom: 8px;
  right: 8px;
  background: rgba(0, 0, 0, 0.6);
  color: white;
  padding: 2px 8px;
  border-radius: 4px;
  font-size: 12px;
}

.course-info {
  padding: 16px;
}

.course-title {
  font-size: 16px;
  font-weight: 600;
  margin: 0 0 10px 0;
  color: #303133;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.course-meta {
  display: flex;
  justify-content: space-between;
  margin-bottom: 10px;
  font-size: 12px;
  color: #909399;
}

.course-category {
  background-color: #f0f9ff;
  color: #409eff;
  padding: 2px 8px;
  border-radius: 4px;
}

.course-description {
  font-size: 14px;
  color: #606266;
  line-height: 1.5;
  margin: 0 0 12px 0;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.course-stats {
  display: flex;
  justify-content: space-between;
  font-size: 12px;
  color: #909399;
}

.stat-item {
  display: flex;
  align-items: center;
}

.stat-item i {
  margin-right: 4px;
}

@media (max-width: 768px) {
  .course-cover {
    height: 140px;
  }
  
  .course-info {
    padding: 12px;
  }
  
  .course-title {
    font-size: 14px;
  }
  
  .course-description {
    font-size: 13px;
  }
}
</style>